<style>
/*图形验证码开始*/
.input-val {
  width: 375px;
  height: 40px;
  border: 0;
  box-sizing: border-box;
}

#canvas {
  vertical-align: middle;
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: pointer;
  width: 95px;
  height: 40px;
}
/*图形验证码结束*/
.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>

<template>
  <div class="bodyDiv">
    <el-card style="width: 1200px;height:auto;margin: 0 auto;">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;margin:12px auto">
        <el-breadcrumb-item :to="{ path: '/sys-user/userCenter' }" style="font-size: 19px;">
          <i class="el-icon-user-solid"></i> 个人中心
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          修改密码
        </el-breadcrumb-item>
      </el-breadcrumb>

      <el-divider></el-divider>

      <div style="width: 600px; margin: 0 auto;height: auto">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input prefix-icon="el-icon-lock" v-model="ruleForm.oldPassword" placeholder="请输入您的原密码！"></el-input>
          </el-form-item>

          <el-form-item label="新密码" prop="newPassword">
            <el-input prefix-icon="el-icon-unlock" v-model="ruleForm.newPassword" placeholder="请输入您的新密码！"></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input prefix-icon="el-icon-lock" v-model="ruleForm.confirmPassword" placeholder="请再次输入新密码！"></el-input>
          </el-form-item>

          <!--图形验证-->
          <el-form-item label="图形验证码">
            <div class="code" style="padding: 0">
              <el-input prefix-icon="el-icon-warning-outline" type="text" v-model="code"
                        placeholder="请输入验证码"
                        class="input-val"></el-input>
              <canvas id="canvas"></canvas>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')">提交修改</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    /*.................................图 形 验 证 码 开 始.......................................*/
    $(function () {
      var show_num = [];
      draw(show_num);
      this.show_num = show_num;
      localStorage.setItem("num", JSON.stringify(this.show_num.join('')));

      $("#canvas").on('click', function () {
        draw(show_num);
        localStorage.setItem("num", JSON.stringify(show_num.join('')));
      })
    })

    //生成并渲染出验证码图形
    function draw(show_num) {
      var canvas_width = $('#canvas').width();
      var canvas_height = $('#canvas').height();
      var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
      var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
      canvas.width = canvas_width;
      canvas.height = canvas_height;
      var sCode = "a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
      var aCode = sCode.split(",");
      var aLength = aCode.length;//获取到数组的长度

      for (var i = 0; i < 4; i++) {  //这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
        var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
        // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
        var deg = Math.random() - 0.5; //产生一个随机弧度
        var txt = aCode[j];//得到随机的一个内容
        show_num[i] = txt.toLowerCase();
        var x = 10 + i * 20;//文字在canvas上的x坐标
        var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
        context.font = "bold 23px 微软雅黑";
        context.translate(x, y);
        context.rotate(deg);
        context.fillStyle = randomColor();
        context.fillText(txt, 0, 0);
        context.rotate(-deg);
        context.translate(-x, -y);
      }
      for (var i = 0; i <= 5; i++) { //验证码上显示线条
        context.strokeStyle = randomColor();
        context.beginPath();
        context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
        context.stroke();
      }
      for (var i = 0; i <= 30; i++) { //验证码上显示小点
        context.strokeStyle = randomColor();
        context.beginPath();
        var x = Math.random() * canvas_width;
        var y = Math.random() * canvas_height;
        context.moveTo(x, y);
        context.lineTo(x + 1, y + 1);
        context.stroke();
      }
    }

    //得到随机的颜色值
    function randomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    }

    /*..................................图 形 验 证 码 结 束........................................*/

    return {
      code: '',
      num: '',
      show_num: [],
      ruleForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules: {
        oldPassword: [
          {required: true, message: '请输入原密码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入8-18位包含英文、数字的新密码！', trigger: 'blur'},
        ],
        confirmPassword: [
          {required: true, message: '请再次输入新密码', trigger: 'blur'},
        ],
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let num = localStorage.getItem("num");
          let code = this.code.toLowerCase();
          let code1 = JSON.stringify(code);
          if (code1 === "") {
            this.$message.error("请先完成图形验证！!");
            return;
          } else if (code1 !== num) {
            this.$message.error("验证码错误！请重新输入！");
            return;
          }

          let formData = this.qs.stringify(this.ruleForm);
          console.log(formData);
          let url = 'http://localhost:8080/user/updatePass';
          console.log('url = ' + url);
          this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
              .post(url,formData).then((response) => {
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              this.$notify.success({
                title: '提示',
                message: "修改密码成功，请重新登录！",
                showClose: true,
                position: 'top-right'
              });
              localStorage.setItem("userJwt",'');
              this.$router.push('/login');
            } else {
              this.$notify.warning({
                title: '提示',
                message: responseBody.message,
                showClose: true,
                position: 'top-right'
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>